import React, { FC, useEffect, useState } from 'react'
import { getTableFieldList } from '@/services/tableColumn'
import ProTable, { ProColumns } from '@ant-design/pro-table';

interface TableFieldProps {
  superId:string,
}

const TableField: FC<TableFieldProps> = (props) => {

  const { superId } = props;
  const [list,setList] = useState<any>([]);

  useEffect(() => {
    if (superId) {
      getTableFieldList({table_id:superId}).then(res => {
        if (res.code === 10000) {
          setList(res.data);
        }
      })
    }
  },[superId])


  const columns: ProColumns<any>[] = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '数据类型',
      dataIndex: 'mysql_type',
    },
    {
      title: '注释',
      dataIndex: 'comment',
    },
  ];

  return(
        <ProTable<any>
          size='small'
          columns={columns}
          dataSource={list}
          request={async (params) => getTableFieldList({table_id:superId})}
          search={false}
          rowKey="key"
          options={{
            search: false,
          }}
          pagination={false}
          headerTitle='表格字段'
        />
  )
}

export default TableField;
